<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { problemLists } from "@/utils/list.js";
// import MathCanvas from '@/components/mathcanvas.vue';
import { ref } from "vue";

const TabCur = ref(1);
const scrollLeft = ref(0);

// 答到第几题区分
const index = ref(1);

const tabSelect = (e) => {
  uni.showLoading({
    title: "加载中...",
  });
  TabCur.value = e.currentTarget.dataset.id;
  scrollLeft.value = (e.currentTarget.dataset.id - 1) * 60;
  index.value = 1;
  isOpen.value = false;
  let list = problemLists.filter((ev) => ev.uid == TabCur.value);
  problemList.value = list;
  console.log(problemList.value);
  setTimeout(() => {
    uni.hideLoading();
    getProblem();
  }, 100);
};

const navList = [
  { id: 1, navName: "算法面试" },
  { id: 2, navName: "训练优化" },
  { id: 3, navName: "opencv" },
];

const problemList = ref([]);

// 获取底部安全高度
const { safeAreaInsets } = uni.getSystemInfoSync();
// 页面加载的时候, 获取面试题
const finds = ref(null);
const getProblem = () => {
  console.log(index.value);
  console.log(problemList);
  const find = problemList.value.find((ev, ind) => ind + 1 == index.value);
  console.log(find);
  finds.value = find;
};
// 加载
onLoad(() => {
  let list = problemLists.filter((ev) => ev.uid == TabCur.value);
  problemList.value = list;
  console.log(problemList.value);
  index.value = 1;
  getProblem();
});
// 下一题
const next = () => {
  isOpen.value = false;
  index.value++;
  getProblem();
};
// 上一题
const prev = () => {
  isOpen.value = false;
  index.value--;
  getProblem();
};

// 显示答案
const isOpen = ref(false);
// 点击显示
const analysis = () => {
  if (isOpen.value) {
    uni.showToast({
      title: "已显示答案解析, 请勿重复点击",
      icon: "none",
    });
  }
  isOpen.value = true;
};
</script>
<template>
  <view class="home">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">图像算法面试题</block>
    </cu-custom>
    <view class-="nav">
      <scroll-view
        scroll-x
        class="bg-white nav text-center"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view
          class="cu-item"
          :class="item.id == TabCur ? 'text-blue cur' : ''"
          v-for="(item, index) in navList"
          :key="item.id"
          @tap="tabSelect"
          :data-id="item.id"
        >
          {{ item.navName }}
        </view>
      </scroll-view>
    </view>
    <view class="card">
      <view class="cu-card article">
        <view class="cu-item shadow">
          <view class="cu-bar bg-white">
            <view class="action sub-title">
              <text class="text-xl text-bold text-blue">第{{ index }}题</text>
              <text class="bg-blue" style="width: 2rem"></text>
              <!-- last-child选择器-->
            </view>
          </view>
          <view style="padding: 30rpx; font-weight: 600">
            <text class="text">{{ finds.name }}</text>
          </view>
          <!-- 答案 -->
          <view class="problem" v-if="isOpen">
            <ua-markdown :source="finds.content" :showLine="false" />
            <!-- <view v-if="finds.br">
              <view v-html="finds.centent"></view>
            </view>
            <view v-else>{{ finds.centent }}</view>
            <view v-if="finds.isMath" style="min-height: 200rpx; padding: 26rpx; font-size: 32rpx; font-weight: 600;">
              <text>测试公式如下: </text>
              <MathCanvas :math="finds.math"></MathCanvas>
            </view> -->
          </view>
          <!-- 问题 end -->
        </view>
      </view>
    </view>
    <view style="width: 1rpx; height: 160rpx"></view>
    <view
      class="cu-bar bg-white foot btn-group round"
      :style="[{ bottom: safeAreaInsets.bottom + 'px' }]"
      style="height: 120rpx"
    >
      <button
        class="cu-btn bg-green shadow-blur round"
        @tap="prev"
        v-if="index != 1"
      >
        上一题
      </button>
      <button
        class="cu-btn bg-blue shadow-blur round"
        @tap="next"
        v-if="index != problemList.length"
      >
        下一题
      </button>
      <button class="cu-btn bg-blue shadow-blur round" @tap="analysis">
        查看解析
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background-color: #f3f3f3;
}

.problem {
  font-size: 32rpx;
  font-weight: 500;
  padding: 30rpx;
}

.text {
  font-size: 34rpx;
  // font-weight: 700;
}
</style>
